<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <title>Problem List</title>
    <script src="/js/pagination.js"></script>
</head>
<body>
<main class="ui container">
    <div id="problem-list">
        <div class="ui segment">
            <form class="ui icon input" v-on:submit.prevent="search_problem()">
                <input type="text" v-model="search_string" placeholder="搜索题目名">
                <i class="search link icon" v-on:click="search_problem()"></i>
            </form>
            <a class="ui green button" href="/admin/problem/add">New Problem</a>
        </div>
        <div class="ui center aligned pagination menu">
            <pagination :class="{disabled:first}" content='<i class="angle double left icon"></i>'
                        v-on:change_page="get_page" v-bind:to_page="0"></pagination>
            <pagination :class="{disabled:first}" content="<i class='angle left icon'></i>"
                        v-on:change_page="get_page" v-bind:to_page="number-1"></pagination>
            <pagination v-for="n in npage" :class="{active:number == n}" v-bind:content="n+1"
                        v-on:change_page="get_page" v-bind:to_page="n"></pagination>
            <pagination :class="{disabled:last}" content='<i class="angle  right icon"></i>'
                        v-on:change_page="get_page" v-bind:to_page="number+1"></pagination>
            <pagination :class="{disabled:last}" content='<i class="angle double right icon"></i>'
                        v-on:change_page="get_page" v-bind:to_page="totalPages-1"></pagination>
        </div>
        <div class="ui selection vertically list celled segment" :class="{loading:!ready}">
            <div class="ui item" target="_blank" v-for="p in problems">
                <a :href="'/problems/'+p.id" target="_blank"><h3>{{p.id}} - {{p.title}} - {{p.score}}积分</h3></a>
                <div class="right floated">
                    <div class="ui inverted red button small" v-on:click="delete_problem(p.id)" v-if="privilege==1">
                        Delete
                    </div>
                    <a class="ui button brown inverted small" :href="'/admin/problem/edit/'+p.id"
                       target="_blank">Update</a>
                </div>
                <div class="ui small horizontal labels">
                    <div class="ui label" v-for="pt in p.tags" v-html="pt.name"></div>
                </div>
            </div>
        </div>
        <div class="ui center aligned pagination menu">
            <pagination :class="{disabled:first}" content='<i class="angle double left icon"></i>'
                        v-on:change_page="get_page" v-bind:to_page="0"></pagination>
            <pagination :class="{disabled:first}" content="<i class='angle left icon'></i>"
                        v-on:change_page="get_page" v-bind:to_page="number-1"></pagination>
            <pagination v-for="n in npage" :class="{active:number == n}" v-bind:content="n+1"
                        v-on:change_page="get_page" v-bind:to_page="n"></pagination>
            <pagination :class="{disabled:last}" content='<i class="angle  right icon"></i>'
                        v-on:change_page="get_page" v-bind:to_page="number+1"></pagination>
            <pagination :class="{disabled:last}" content='<i class="angle double right icon"></i>'
                        v-on:change_page="get_page" v-bind:to_page="totalPages-1"></pagination>
        </div>
    </div>
</main>
<script>
    Array.prototype.remove = function (from, to) {
        var rest = this.slice((to || from) + 1 || this.length);
        this.length = from < 0 ? this.length + from : from;
        return this.push.apply(this, rest);
    };
    var problems_list = new Vue({
        el: "#problem-list",
        data: {
            privilege: user_bar.privilege,
            ready: false,
            problems: [],
            number: 0,
            first: false,
            last: false,
            npage: [],
            totalPages: 1,
            search_string: "",
            color: ["red", "blue", "green", "orange", "yellow", "pink", "brown", "purple", "olive", "teal"]
        },
        methods: {
            delete_problem(pid) {
                if (!confirm("*****WARN*****\n" +
                    "You are deleting problem " + pid + "\n" +
                    "将删除问题 " + pid + " 此过程不可逆\n" +
                    "将同时删除提交的代码，比赛内的题目，题解等")) {
                    return;
                }
                var that = this;
                axios.delete("/api/admin/problem/" + pid)
                    .then(function (res) {
                        alert(res.data.message);
                        if (res.data.code == 200) {
                            that.get_page(that.number);
                        }
                    })
                    .catch(function (e) {
                        console.log(e.response.data);
                    });
            },
            search() {
                let ss = this.search_string;
                return ss;
            },
            colorClass(id) {
                try {
                    return this.color[parseInt(id) % 10]
                } catch (e) {
                    return this.color[Math.floor(Math.random() * 10)]
                }
            },
            search_problem: function () {
                this.get_page(0);
            },
            get_page: function (to_page) {
                var that = this;
                if (to_page !== 0 && (to_page < 0 || to_page >= that.totpage))
                    return null;
                url = "/api/admin/problem?page=" + to_page + "&search=" + this.search();
                axios.get(url)
                    .then(function (response) {
                        response = response.data;
                        that.problems = response.content;
                        that.last = response.last;
                        that.first = response.first;
                        that.number = response.number;
                        that.totalPages = response.totalPages;
                        that.npage = [];
                        for (var i = Math.max(0, that.number - 5); i < Math.min(that.totalPages, that.number + 6); i++) {
                            that.npage.push(i)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        created() {
            var that = this;
            axios.get('/api/admin/problem')
                .then(function (response) {
                    that.privilege = user_bar.privilege;
                    response = response.data;
                    that.problems = response.content;
                    that.totalPages = response.totalPages;
                    that.last = response.last;
                    that.first = response.first;
                    that.number = response.number;
                    for (var i = Math.max(0, that.number - 5); i < Math.min(that.totalPages, that.number + 6); i++) {
                        that.npage.push(i)
                    }
                    that.ready = true;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    });
</script>
</body>
</html>
